<template>
  <div class="dashboard-container">
    <!-- 筛选条件 -->
    <div class="filter-container">
      <el-form :inline="true">
        <el-form-item label="设备类型">
          <el-select v-model="filter.type" placeholder="全部类型">
            <el-option label="全部" value="" />
            <el-option
                v-for="item in deviceTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
              v-model="filter.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="refreshData">应用筛选</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 核心指标看板 -->
    <div class="kpi-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <metric-card
              title="设备总数"
              :value="kpi.totalDevices"
              trend="5%"
              icon="monitor"
          />
        </el-col>
        <el-col :span="6">
          <metric-card
              title="平均运行率"
              :value="kpi.avgAvailability"
              unit="%"
              trend="-2%"
              icon="trend-charts"
          />
        </el-col>
        <el-col :span="6">
          <metric-card
              title="故障率"
              :value="kpi.failureRate"
              unit="%"
              trend="1.2%"
              icon="warning"
          />
        </el-col>
        <el-col :span="6">
          <metric-card
              title="平均能耗"
              :value="kpi.avgEnergy"
              unit="kW·h"
              trend="-5%"
              icon="data-analysis"
          />
        </el-col>
      </el-row>
    </div>

    <!-- 分析图表区 -->
    <div class="chart-container">
      <el-row :gutter="20">
        <el-col :span="12">
          <chart-card title="设备运行效率对比">
            <e-charts :option="comparisonOption" />
          </chart-card>
        </el-col>
        <el-col :span="12">
          <chart-card title="运行效率趋势分析">
            <e-charts :option="trendOption" />
          </chart-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="mt-20">
        <el-col :span="8">
          <chart-card title="设备状态分布">
            <e-charts :option="statusOption" />
          </chart-card>
        </el-col>
        <el-col :span="16">
          <chart-card title="故障预测分析">
            <e-charts :option="predictOption" />
          </chart-card>
        </el-col>
      </el-row>
    </div>

    <!-- 决策建议 -->
    <div class="recommendation-container mt-20">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>设备维护建议</span>
            <el-tag type="warning">AI分析建议</el-tag>
          </div>
        </template>
        <div v-for="(item, index) in recommendations" :key="index" class="recommend-item">
          <div class="device-info">
            <span class="device-name">{{ item.deviceName }}</span>
            <el-tag :type="item.priority === 'high' ? 'danger' : 'warning'" size="small">
              {{ item.priority === 'high' ? '紧急' : '建议' }}
            </el-tag>
          </div>
          <div class="recommend-content">{{ item.content }}</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import ECharts from '@/components/ECharts.vue'
import MetricCard from '@/components/MetricCard.vue'
import ChartCard from '@/components/ChartCard.vue'

// 筛选条件
const filter = reactive({
  type: '',
  dateRange: []
})

// 核心指标数据
const kpi = reactive({
  totalDevices: 142,
  avgAvailability: 88.5,
  failureRate: 5.2,
  avgEnergy: 120.5
})

// 图表配置
const comparisonOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['空压机', '数控机床', '注塑机', '包装机']
  },
  yAxis: { name: '运行效率(%)' },
  series: [{
    type: 'bar',
    data: [85, 78, 92, 88],
    itemStyle: { color: '#5470c6' }
  }]
})

const trendOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: { name: '运行效率(%)' },
  series: [{
    type: 'line',
    data: [82, 85, 88, 90, 89, 92],
    areaStyle: {},
    smooth: true
  }]
})

const statusOption = ref({
  tooltip: { trigger: 'item' },
  series: [{
    type: 'pie',
    data: [
      { value: 65, name: '正常' },
      { value: 15, name: '预警' },
      { value: 20, name: '故障' }
    ]
  }]
})

const predictOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: { data: ['7月', '8月', '9月', '10月'] },
  yAxis: [{ type: 'value', name: '故障概率(%)' }],
  series: [
    {
      type: 'bar',
      data: [15, 18, 22, 25],
      name: '预测故障率'
    },
    {
      type: 'line',
      data: [12, 15, 18, 20],
      name: '历史同期'
    }
  ]
})

// 决策建议
const recommendations = ref([
  {
    deviceName: '空压机-03',
    content: '该设备近期故障率上升15%，建议进行预防性维护',
    priority: 'high'
  },
  {
    deviceName: '数控机床-07',
    content: '运行效率低于同类设备20%，建议优化工艺参数',
    priority: 'medium'
  }
])

// 设备类型选项
const deviceTypes = [
  { value: 'air_compressor', label: '空压机' },
  { value: 'cnc', label: '数控机床' },
  { value: 'molding', label: '注塑机' }
]

// 刷新数据
const refreshData = () => {
  // 实际项目此处调用API获取数据
  console.log('应用筛选:', filter)
}

onMounted(() => {
  // 初始化数据
  refreshData()
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.filter-container {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.kpi-container {
  margin-bottom: 20px;
}

.chart-container {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
}

.mt-20 {
  margin-top: 20px;
}

.recommendation-container {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .recommend-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .device-info {
      display: flex;
      align-items: center;
      margin-bottom: 5px;

      .device-name {
        margin-right: 10px;
        font-weight: 500;
      }
    }

    .recommend-content {
      color: #666;
      font-size: 14px;
    }
  }
}
</style>